<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#00F7FF' }, // 设置颜色渐变
              { offset: 1, color: '#0084FE' },
            ],
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#FFC13F' },
              { offset: 1, color: '#FF5D15' },
            ],
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#B33ECC ' },
              { offset: 1, color: '#8447FF' },
            ],
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          x: '70%',
          y: 'center',
          orient: 'vertical',
          padding: [0, 0, 30, 0],
          itemGap: 30,
          textStyle: {
            color: '#fff',
            fontSize: 15,
            fontWeight: 'bold',
          },
        },
        grid: {
          top: '10%',
          left: '6%',
          right: '35%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['非开放', '开放'],
            axisLabel: {
              color: '#5EE7FE',
              fontSize: 20,
              fontWeight: 'bold',
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
            fontSize: 12,
          },
          splitLine: {
            lineStyle: {
              color: '#fff',
              opacity: 0.2,
            },
          },
        },
        series: [
          {
            name: '靖江港区',
            type: 'bar',
            barWidth: '15',
            data: [15, 32],
          },
          {
            name: '高港港区',
            type: 'bar',
            barWidth: '15',
            data: [6, 8],
          },
          {
            name: '泰兴港区',
            type: 'bar',
            barWidth: '15',
            data: [10, 7],
          }
        ],
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
